<!DOCTYPE html>
<html>

<style type="text/css">
	.searchResultContent > div{
		display: none;
		max-width: 800px;
	}
	.searchResultTab > a{
		display: inline-block;
		height: 60px;
		width: 120px;
		border: 1px solid;
	}
	.searchResultTab > input{
		display: inline-block;
		height: 30px;
		width: 120px;
		border: 1px solid;
	}
	.active{
		background-color: green;
		color: white;
		font-stretch: wider;
	}
	iframe{
		width: 800px;
		height: 800px;
	}
	#afanTrunk,
	#afanAnalys,
	#afanAnswer{
		width: 800px;
		height: 200px;
	}
</style>


	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<script type="text/javascript" src="js/jquery.min.js"></script>
	</head>
	<body>

	<div style="float:left">
		<span>图片总共</span><span id="totalCount"></span>
		<span style="color:green">已处理</span><span id="isMarkCount" style="color:green"></span>
		<span style="color:red">未处理</span><span id="noMarkCount" style="color:red"></span>
	</div>
	<center>
		<div>
			<div id="img_ocrDiv"></div>
			<div id="img_nameDiv"></div>
			<br>
		</div>
	</center>

	<div style="float:right"><button id="exportExecl">导出execl数据</button>
		<br>
		<br>
		<span>选择导出已标记图片</span>
		<select id="zipimg">
			<option value="0">请选择</option>
			<option value="valid">有效图片</option>
			<option value="invalid">无效图片</option>
			<option value="pointvalid">指搜有效图片</option>
			<option value="nopointvalid">非指搜有效图片</option>
			<option value="nosearch">搜索失败图片</option>
			<option value="pointnosearch">指搜失败图片</option>
			<option value="nopointnosearch">非指搜失败图片</option>
			<option value="success">搜索成功图片</option>
			<option value="pointsuccess">指搜成功图片</option>
			<option value="nopointsuccess">非指搜成功图片</option>
			<option value="first">搜索题目成功置顶图片</option>
			<option value="pointfirst">指搜题目成功置顶图片</option>
			<option value="nopointfirst">非指搜题目成功置顶图片</option>
			<option value="nofirst">搜索题目成功非置顶图片</option>
			<option value="pointnofirst">指搜题目成功非置顶图片</option>
			<option value="nopointnofirst">非指搜题目成功非置顶图片</option>

		</select>
		<button id="exportImgZip">执行导出</button>
	</div>


	<center>
		<div>	
			<button id="imageSearch" style="background-color: SkyBlue">图片搜索</button>&nbsp;&nbsp;&nbsp;
			<button id="pointImageSearch" style="background-color: LightCyan">指搜图片搜索</button>&nbsp;&nbsp;&nbsp;
			<input type="checkbox" id="valid_no" ><font color="red">无效图片</font>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="markSubmit" style="background-color: Beige">提交标记</button><label id="markSubmitMsg"><font color="red"></font></label>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<button id="start" style="background-color: Gold">点击开始下一张测试图片</button>
		</div>



	</center>
	<center>
		<div>
			<input type="text" id="img_name" hidden />
			<input type="text" id="is_point" value="0" hidden />
		</div>
		
		<div id="searchResultDiv"></div>
	    <div style="min-width: 1700px;">
		<div id="searchResultShowDiv" style="display: inline-block;vertical-align: top;">
			<div class="searchResultSel">
			</div>
			<div class="searchResultTab">
			</div>
			<div class="searchResultContent">
			</div>
		</div>

	   </div>
	</center>
	<center>


	</center>
	<script type="text/javascript">

		var baseUrl = "http://192.168.1.75:27000/ocrmark";
		//var baseUrl = "http://localhost:27000/ocrmark";
		//var ip_addr = document.location.hostname;
		//var baseUrl = "http://"+ ip_addr + ":27000/ocrmark";

			$(function(){
				$('#start').click(function(){
					$.ajax({
						type: 'POST',
				        dataType: 'json',
				        url: baseUrl + "/resource/questionSearch/getOneImg",
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
				        	if(data.status == '1'){
				        		var name = data.value.img.name;
				        		var imgBase64 = data.value.img.imgBase64;
				        		$('#img_name').val(name);
				        		$('#img_nameDiv').html(name)
								$('#img_ocrDiv').html(imgBase64);
								$("#markSubmitMsg").html('');
								$('#searchResultDiv').html('');
								$('#start').hide();
								$('#is_point').val('0');
								$('#valid_no').removeAttr("checked")

								$("#totalCount").html(data.value.deal.totalCount);
								$("#isMarkCount").html(data.value.deal.isMarkCount);
								$("#noMarkCount").html(data.value.deal.noMarkCount);

								$('#searchResultShowDiv').find('.searchResultSel').html('');
								$('#searchResultShowDiv').find('.searchResultTab').html('');
								$('#searchResultShowDiv').find('.searchResultContent').html('');

				        	}else{
				        		alert(data.msg);
				        	}
				        }
						
					});
				});
				

				
				$('#imageSearch').click(function(){
					searchQuestionByImageForTest();
				});
				
				$('#pointImageSearch').click(function(){
					searchQuestionByImageForPointTest();
				});


				$('#exportExecl').click(function(){
					//$.get( baseUrl + "/resource/questionSearch/export", function( data ) {
					//});
					window.location.href = baseUrl + "/resource/questionSearch/export";
				});

				$('#exportImgZip').click(function(){
					var select = $('#zipimg').val();
					if(select == "0"){
						alert("未选择导出图片类型");
						return;
					}

					window.location.href = baseUrl + "/resource/questionSearch/zip?type="+select;

				});

				$('.searchResultTab').on('click', 'a', function(){
					$(this).addClass('active').siblings().removeClass('active');
					var index = $(this).index();
					$(this).parent().next().children().eq(index).show().siblings().hide();
				})
				
				
				$('#markSubmit').click(function(){
				    var valid_no = $('#valid_no').is(':checked');
				    var is_valid = "1";
					if(valid_no == true){
						is_valid = "0";
					}
                    var question_id = '-1';
					var search_pos = '-1';
					$('input[type="checkbox"][name="search_pos"]:checked').each(function() {
								//alert($(this).attr("id") + "--" + $(this).attr("alt"));
						        question_id = $(this).attr("id").toString();
						        var ret_index = $(this).attr("alt");
						        search_pos = (ret_index-1).toString();

							}
					);

					var img_name = $('#img_name').val();
					var is_point = $('#is_point').val();


					var param = {img_name:img_name,is_point:is_point,is_valid:is_valid,search_pos:search_pos,question_id:question_id};
					$.ajax({
						type: "post",
						url: baseUrl + "/resource/questionSearch/updateMark",
						dataType : "json",
						contentType : "application/json",
						data: ''+JSON.stringify(param),
						success: function (result) {
							if(result.status == '1'){
								$("#markSubmitMsg").html('<font color="green">[提交成功]</font>');
							}else{
								$("#markSubmitMsg").html('<font color="red">'+result.msg+'</font>');
							}

						}
					});

					$('#start').show();

				});

			});

				function searchQuestionByImageForTest() {
					//var fileObj = document.getElementById("uploadImageFile").files[0]; // js 获取文件对象
					//if (typeof (fileObj) == "undefined" || fileObj == null || fileObj.size <= 0) {
					//   return;
					//}
					var img_name = $('#img_name').val();

					//var formFile = new FormData();
					//formFile.append("file", fileObj); //加入文件对象
					$.ajax({
						processData: false,
						contentType: false,
						cache: false,
						type: 'POST',
				        dataType: 'json',
				        url: baseUrl + "/resource/questionSearch/searchQuestionByImageForTest",
				        data: "{\"img_name\":\""+img_name+"\"}",
						async: true,
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
							/*
				        	if(data.status == '1'){
				        		var questionList = data.value.questionList;
				        		var html = '';
				        		for(var i = 0; i < questionList.length; i++){
				        			var question = questionList[i];
				        			if (question.id == 0) {
				        				//html += '<hr>原题图片<br>';
				        			}
				        			else if (question.id == -1) {
				        				html += '<hr>OCR结果：<br>';
				        			}
				        			else {
				        				html += '题目id:'+question.id+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
										html += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font><br><br>'
				        			}
				        			if(question.id != 0){
										html += question.trunk + '<br><br><hr>'
									}

				        		}
				        		$('#searchResultDiv').html(html);
				        	}
				        	else{
				        		alert(data.msg);
				        	}
				        	*/
							if(data.status == '1'){
								var questionList = data.value.questionList;
								var html = '';
								for(var i = 0; i < questionList.length; i++){
									var question = questionList[i];
									if (question.id == 0) {
										//html += '<hr>原题图片<br>';
										//html += question.trunk + '<br><br><hr>'
									}
									else if (question.id == -1) {
										html += '<hr>OCR结果：<br>';
										html += question.trunk + '<br><br><hr>'
									}
								}
								$('#searchResultDiv').html(html);
								var tabHtml = '';
								var contentHtml = '';
								var selHtml = '';
								var size = 0;
								var afanQuestion = null;
								for(var i = 0; i < questionList.length; i++){
									var question = questionList[i];
									if (question.type == 1 || (question.id != 0 && question.id != -1)) {
										size++;
										if(question.type == 0){
											tabHtml += '<a>'+question.id+'</a>';
											//tabHtml += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font>';
											contentHtml += '<div><iframe src="http://onlinelibres.noahedu.com/NRMP_TEST/question/view/simple_view/'+question.id+'"></iframe></div>';
											selHtml += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
										}
										else{
											afanQuestion = question;
											tabHtml += '<a>阿凡题</a>';
											selHtml += '<input type="checkbox" name="search_pos" alt='+i+' id="0"><font color="red">正确题目</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
											contentHtml += '<div>题干：<br><iframe id="afanTrunk"></iframe><br><br>解析<br><iframe id="afanAnalys"></iframe><br><br>答案<br><iframe id="afanAnswer"></iframe></div>';
										}
									}
								}
								$('#searchResultShowDiv').find('.searchResultSel').html(selHtml);
								$('#searchResultShowDiv').find('.searchResultTab').html(tabHtml);
								$('#searchResultShowDiv').find('.searchResultContent').html(contentHtml);
								if(size > 0){
									$('#searchResultShowDiv').find('.searchResultTab').children().eq(0).trigger('click');
								}
								if(afanQuestion != null){
									document.getElementById('afanTrunk').srcdoc = afanQuestion.trunk;
									document.getElementById('afanAnalys').srcdoc = afanQuestion.analys;
									document.getElementById('afanAnswer').srcdoc = afanQuestion.answer;
								}
							}
							else{
								alert(data.msg);
							}
				        }
					})
				}
				
				
				function searchQuestionByImageForPointTest() {
					//var fileObj = document.getElementById("uploadImageFilePoint").files[0]; // js 获取文件对象
					//if (typeof (fileObj) == "undefined" || fileObj == null || fileObj.size <= 0) {
					//    return;
					//}
					//var formFile = new FormData();
					//formFile.append("file", fileObj); //加入文件对象
					var img_name = $('#img_name').val();
					$.ajax({
						processData: false,
						contentType: false,
						cache: false,
						type: 'POST',
				        dataType: 'json',
				        url: baseUrl + "/resource/questionSearch/searchQuestionByImageForPointTest",
				        data: "{\"img_name\":\""+img_name+"\"}",
						async: true,
						timeout: 120000,
						error: function(){
							alert("网络错误")
						},
				        success: function(data){
							/*
				        	if(data.status == '1'){
				        		var questionList = data.value.questionList;
				        		var html = '';
				        		for(var i = 0; i < questionList.length; i++){
				        			var question = questionList[i];
				        			if (question.id == 0) {
				        				//html += '<hr>原题图片<br>';
				        			}
				        			else if (question.id == -1) {
				        				html += '<hr>OCR结果：<br>';
				        			}
				        			else {
				        				html += '题目id:'+question.id+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
										html += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font><br><br><hr>'
				        			}
									if(question.id != 0) {
										html += question.trunk + '<br><br><hr>'
									}
				        		}
				        		$('#searchResultDiv').html(html);
								$('#is_point').val('1');
				        	}
				        	else{
				        		alert(data.msg);
				        	}
							 */
							if(data.status == '1'){
								var questionList = data.value.questionList;
								var html = '';
								for(var i = 0; i < questionList.length; i++){
									var question = questionList[i];
									if (question.id == 0) {
										//html += '<hr>原题图片<br>';
										//html += question.trunk + '<br><br><hr>'
									}
									else if (question.id == -1) {
										html += '<hr>OCR结果：<br>';
										html += question.trunk + '<br><br><hr>'
									}
								}
								$('#searchResultDiv').html(html);
								var tabHtml = '';
								var contentHtml = '';
								var sel = '';
								var size = 0;
								var selHtml = '';
								var afanQuestion = null;
								for(var i = 0; i < questionList.length; i++){
									var question = questionList[i];
									if (question.type == 1 || (question.id != 0 && question.id != -1)) {
										size++;
										tabHtml += '<a>'+question.id+'</a>';
										selHtml += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
										contentHtml += '<div><iframe src="http://onlinelibres.noahedu.com/NRMP_TEST/question/view/simple_view/'+question.id+'"></iframe></div>';
											//contentHtml += '<input type="checkbox" name="search_pos" alt='+i+' id='+question.id+'><font color="red">正确题目</font>';
									}
								}
								$('#searchResultShowDiv').find('.searchResultSel').html(selHtml);
								$('#searchResultShowDiv').find('.searchResultTab').html(tabHtml);
								$('#searchResultShowDiv').find('.searchResultContent').html(contentHtml);
								if(size > 0){
									$('#searchResultShowDiv').find('.searchResultTab').children().eq(0).trigger('click');
								}

							}
							else{
								alert(data.msg);
							}
				        }
					})
				}
					
		</script>
	</body>
</html>
